<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础桩管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/ui.css" rel="stylesheet">
    <link href="css/control.css" rel="stylesheet" >
    <link href="css/layui.css" rel="stylesheet">
    <style>
        #body {
            width: 100%;
            max-height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .articleImg {
            /* width: 100%; */
            /* height: auto !important; */
            max-width: 100px;
        }

        th,
        td {
            text-align: center;
        }
        .form-group-self {
            margin-top: 15px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body class="gray-bg animated fadeInRight">
    <div id="body">
        <!--<div>
            <button class="create btn btn-info layui-btn-normal">资源创建</button>
        </div>-->
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">

                        <div class="form-group-self">
                            <div class="col-sm-2">
                                <!--<label class="col-xs-3 control-label" style="width: 75px;margin-top: 5px;">桩：</label>-->
                                <div class="layui-input-inline layui-form">
                                    <select id="project" lay-filter="xiangmu">
                                        <option data-hidden="true" value="0" disable>请选择项目</option>
                                        <!-- <option value="1">后台管理</option>
                                         <option value="2" >app客户端</option>-->
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <!--<label class="col-xs-3 control-label" style="width: 75px;margin-top: 5px;">钻孔：</label>-->
                                <div class="layui-input-inline layui-form">
                                    <select id="region">
                                        <option data-hidden="true" value="0" disable>请选择区域</option>
                                        <!-- <option value="1">后台管理</option>
                                         <option value="2" >app客户端</option>-->
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <input type="text" class="form-control" id="pileNumber" placeholder="桩号">
                                </div>
                            </div>
                            <div class="col-sm-1">
                                <button class="btn btn-success btn-sm" title="搜索" id="search">搜索</button>
                            </div>
                            <div class="fr" style="">
                                <a href="pileAdd.html" class="btn btn-info btn-sm" title="资源创建">资源创建</a>
                            </div>
                        </div>

                        <div class="ibox-content">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th width="10%">桩号</th>
                                        <th width="5%">桩径</th>
                                        <th width="10%">混凝土强度</th>
                                        <th width="10%">桩整体状态</th>
                                        <th width="10%">设计等级</th>
                                        <th width="5%">桩长</th>
                                        <th width="15%">桩身完整性</th>
                                        <th width="5%">沉渣</th>
                                        <th width="14%">创建时间</th>
                                        <th width="12%">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="list">
                                </tbody>
                            </table>
                        </div>
                        <div id="pageRow" class="fixBottom">
                            <div class="fr" id="page">
                                <ul class="pagination" style="margin:0;float:right;">
                                    <li class="paginate_button" id="firstPage">
                                        <a href="javascript:">
                                            <<</a>
                                    </li>
                                    <li class="paginate_button" id="previousPage">
                                        <a href="javascript:">
                                            <</a>
                                    </li>
                                    <li class="paginate_button">
                                        <a href="javascript:" style="padding:0">
                                            <select class="" name="" style="padding:4px 10px" id="pageInfo">
                                            </select>
                                        </a>
                                    </li>
                                    <li class="paginate_button" id="nextPage">
                                        <a href="javascript:">></a>
                                    </li>
                                    <li class="paginate_button" id="lastPage">
                                        <a href="javascript:">>></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="fr" style="margin-right:20px;">
                                <div class="dataTables_info" style="line-height:28px;">当前显示第
                                    <span id="startRow"></span> 到
                                    <span id="endRow"></span> 项，共
                                    <span id="totalPage"></span> 项 ,每页显示
                                    <select class="" name="" id="pageSizeInfo" style="margin:0 10px;">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                        <option value="50">50</option>
                                    </select>项</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/work/common.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>
    <script src="js/plugins/layer/layer.js"></script>
    <!-- 自定义js -->
    <script src="js/content.js"></script>
    <script src="js/pileCommon.js"></script>
    <script src="js/layui.js"></script>
    <script>
        // layui表单使用
        var form = null;
        layui.use(['form'], function () {
            form = layui.form;
            form.on('select(xiangmu)', function (data) {
                initRegionData(data.value);
            });
        })
        var pageNum = getStorage("pageNum") || 1;
        var pageSize = getStorage("pageSize") || 20;
        var flag = 0;
        var regionId = "";
        $(document).ready(function () {
            $("#pageSizeInfo").val(pageSize)
            var today = Date.parse(new Date())


            requestGetPileList();


            setTimeout(function () {
                initProjectData();
            },200)

            // 搜索
            $("#search").on("click", function () {
                var projectId=$('#project option:selected').val();
                regionId=$('#region option:selected').val();
                if(projectId!=0 && regionId==0){
                    layer.msg("请选择区域！", {time:2000})
                    return;
                }
                regionId= $('#region option:selected').val()==0?null:$('#region option:selected').val();
                requestGetPileList();
            });

        });


        function requestGetPileList() {
           //var pileNo= isNULL($('#pileNumber').val())?null:$('#pileNumber').val();
            var dataJson = {regionId: regionId,pileNo:$('#pileNumber').val()};
            ajax({
                url: "pile/showPile",
                type: "POST",
                dataType: 'json',
                async: false,
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                data: JSON.stringify(dataJson),
                timeout: 10000,
                contentType: "application/json;charset=utf-8",
                error: function (xhr, type) {

                },
                successx: function (data) {
                    if (data.success == true) {
                        creatList(data.data);
                        createPageInfo(data.data);
                    } else {
                        layer.msg(data.message,{time:1000})
                    }
                },
            });

        }

        function creatList(data) {
            var tpl = '';
            for (var i = 0; i < data.length; i++) {
                tpl += '<tr class="viewDb" data-val="' + data[i].id + '">' +
                    '<td>' + data[i].pileNumber + '</td>' +
                    '<td>' + undeToNull(data[i].pileDiameter) + '</td>' +
                    '<td> ' + undeToNull(data[i].concreteStrength) + '</td>' +
                    '<td>' + determineName(data[i].status) + '</td>' +
                    '<td>' + concreteDesignGradeName(data[i].concreteDesignGrade) + '</td>' +
                    '<td>' + undeToNull(data[i].cPileLength) + '</td>' +
                    '<td>' + integrityName(data[i].dPileIntegrity) + '</td>' +
                    '<td>' + sedimentName(data[i].sedimentThicknessStatus) + '</td>' +
                    '<td>' + timeStamp2String(data[i].createTime, "ymdhms") + '</td>' +
                    '<td>'
                    + '<a class="detail btn btn-info btn-xs" pileId="'+data[i].id+'">详情</a>&nbsp;&nbsp;&nbsp;'
                    + '<a class="update btn btn-xs btn-warning" pileId="'+data[i].id+'">修改</a>&nbsp;&nbsp;&nbsp;'
                /*+ '<a class="delete btn btn-xs btn-danger">删除</a>&nbsp;&nbsp;&nbsp;'*/
                '</td>' +
                '</tr>'
            }
            $("#list").empty().append(tpl);

            // 资源创建
            $('.create').click(function () {
                /*var id = $(this).parent().parent().attr("data-val");
                setStorage("pileId", id);*/
                window.location.href = "pileAdd.html";
            });

            // 资源修改
            $('.update').click(function () {
                var id = $(this).parent().parent().attr("data-val");
                setStorage("pileId", id);
                window.location.href = "pileEdit.html";
            });

            // 查看详情
            $('.detail').click(function () {
                var id = $(this).parent().parent().attr("data-val");
                setStorage("pileId", id);
                window.location.href = "piledetailsnew.html";
            });

            // 删除
            $('.delete').click(function () {
                var id = $(this).parent().parent().attr("data-val");
                layer.confirm('确定要删除吗？', {btn: ['删除','不删除'], title: '提示',icon: 3}, function(index){
                    // 删除请求
                    requestDeletePile(id)
                    layer.close(index);
                }, function(index){
                    layer.close(index);
                });
            });
        }

        /**
         * 删除桩号信息
         * @param id
         */
        function requestDeletePile(id) {
            var dataParam = {pileId: id};
            ajax({
                url: "pile/deleltePile",
                type: "POST",
                dataType: 'json',
                jsonp: "callback",
                async: false,
                data: JSON.stringify(dataParam),
                contentType: "application/json;charset=utf-8",
                timeout: 10000,
                error: function (xhr, type) {

                },
                successx: function (data) {
                    if (data.success == true) {
                        requestGetPileList();
                    } else {
                        layer.msg(data.message,{time:1000})
                    }
                },
            });
        }

        //创建页码信息
        function createPageInfo(data) {
            $("#startRow").text(data.startRow)
            $("#endRow").text(data.endRow)
            $("#totalPage").text(data.total)
            var temp = '';
            for (var i = 1; i < data.pages + 1; i++) {
                temp += '<option value="' + i + '">' + i + '</option>'
            }
            $("#pageInfo").html(temp);
            $("#pageInfo").val(data.pageNum);
            $("#pageInfo").change(function () {
                $("#pageInfor").blur();
                if (flag == 1) {
                    return
                };
                flag = 1
                pageNum = this.options[this.options.selectedIndex].value
                setStorage("pageNum", pageNum)
                getData()
            });
            $("#firstPage").click(function () {
                if (pageNum != 1) {
                    if (flag == 1) {
                        return
                    };
                    flag = 1
                    pageNum = 1
                    setStorage("pageNum", pageNum)
                    getData()
                }
            });
            $("#lastPage").click(function () {
                if (pageNum < data.pages) {
                    if (flag == 1) {
                        return
                    };
                    flag = 1
                    pageNum = data.pages
                    setStorage("pageNum", pageNum)
                    getData()
                }
            });
            $("#nextPage").click(function () {
                if (pageNum < data.pages) {
                    if (flag == 1) {
                        return
                    };
                    flag = 1
                    pageNum++
                    setStorage("pageNum", pageNum)
                    getData()
                }
            });
            $("#previousPage").click(function () {
                if (pageNum > 1) {
                    if (flag == 1) {
                        return
                    };
                    flag = 1
                    pageNum--
                    setStorage("pageNum", pageNum)
                    getData()
                }
            })
        }


        function initProjectData() {
            ajax({
                url: "pile/showPileProject",
                type: "POST",
                dataType: "json",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                data: {},
                timeout: 10000,
                contentType: "application/json;charset=utf-8",
                error: function (xhr, type) {
                    layer.msg("服务器异常，请稍后重试！", {time: 2000})
                },
                successx: function (data) {
                    if (data.success == true) {
                        setProject(data.data);
                    } else {
                        layer.msg(data.message, {time: 1000})
                    }
                }
            });

        }


        function setProject(data) {
            if (data == null) {
                return;
            }
            $("#project").html("");
            var optionHtml = '<option value="0">请选择项目</option>';
            for (var i = 0; i < data.length ; i++) {
                var option =  '<option value="'+data[i].id+'">'+data[i].name+'</option>';
                optionHtml += option;
            }
            $("#project").html(optionHtml);
            form.render();
        }


        function initRegionData(projectId) {
            ajax({
                url: "pile/showNextInfoWeb",
                type: "POST",
                dataType: "json",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                data: JSON.stringify({searchId: projectId,searchType: 0}),
                timeout: 10000,
                contentType: "application/json;charset=utf-8",
                error: function (xhr, type) {
                    layer.msg("服务器异常，请稍后重试！", {time: 2000})
                },
                successx: function (data) {
                    if (data.success == true) {
                        setRegoin(data.data);
                    } else {
                        layer.msg(data.message, {time: 1000})
                    }
                }
            });

        }


        function setRegoin(data) {
            var optionHtml = '<option value="0">请选择区域</option>';
            if (data!=null) {
                $("#region").html("");
                for (var i = 0; i < data.length ; i++) {
                    var option =  '<option value="'+data[i].id+'">'+data[i].name+'</option>';
                    optionHtml += option;
                }

            }
            $("#region").html(optionHtml);
            form.render();

        }


    </script>
</body>

</html>